<template>
  <div id="main">
    <el-container>
      <el-aside class="menu" :width="menuWidth">
        <el-container>
          <el-aside class="second" width="100%">
            <el-scrollbar height="100%">
              <div class="center" style="margin: 40px 0 0 0; height: 90px;font-size:30px">
                <img src="@/assets/image/logo.png" style="width:30%"/>
                <!-- 后台管理 -->
              </div>
              <el-menu
                :default-active="menuPostion"
                :default-openeds="menuOpeneds"
                @open="handleOpen"
              >
                <template v-for="(item, index) in menus" :key="index">
                  <router-link v-if="!item.is_sub_menu" :to="item.path">
                    <el-menu-item :index="index"
                      ><i :class="'i ' + item.icon"></i
                      >{{ item.text }}</el-menu-item
                    >
                  </router-link>
                  <el-submenu :index="index" v-else>
                    <template #title
                      ><i :class="'i ' + item.icon"></i>{{ item.text }}
                    </template>
                    <router-link
                      v-for="(sub_menu, sub_index) in item.sub_menus"
                      :key="sub_index"
                      :to="sub_menu.path"
                    >
                      <el-menu-item :index="index + '-' + sub_index">{{
                        sub_menu.text
                      }}</el-menu-item>
                    </router-link>
                  </el-submenu>
                </template>
              </el-menu>
            </el-scrollbar>
          </el-aside>
        </el-container>
      </el-aside>
      <el-container>
        <el-header>
          <div class="nav">
            <!-- <div class="item">欢迎来到玉溪煤矿短信平台管理系统</div>
            <div class="item">总工作台</div> -->
          </div>

          <div class="username">
            <!-- <span>
              <el-badge value="0" :max="9" type="danger">
                <i class="el-icon-chat-line-round fs18"></i>
              </el-badge>
            </span> -->
            <span @click="refresh"><i class="el-icon-refresh fs18"></i></span>

            <el-dropdown trigger="hover">
              <span class="el-dropdown-link">
                <img src="@/assets/image/avatar.png" class="avatar" />系统管理员
                <i class="el-icon-arrow-down arrow"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="el-icon-switch-button" @click="logout"
                    >退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { request_logout, request_user_info } from "@/util/api";
import menus from "@/config/menu";

export default {
  data() {
    return {
      origin_menus: menus, // 菜单列表
      menus: [], // 菜单列表
      menuWidth: "236px", // 菜单宽度
      menuPostion: "", // 二级菜单索引
      menuOpeneds: [2, 4, 5], // 默认展开的菜单索引
      is_cancel_bj: false,
    };
  },
  mounted() {
    request_user_info()
        .then((res) => {
          if (res.data.data.branch.length > 0) {
            let arr = []
            this.origin_menus.map((item) => {
              if(item.is_auth != 1) {
                arr.push(item)
              }
            })
            this.menus = arr
          } else {
            this.menus = menus
            this.$isAdmin = true;
          }
          console.log(this.$isAdmin)
          this.setMenuPosition();
        })
  },
  methods: {
    // 设置当前活跃菜单
    setMenuPosition() {
      const currentPath = this.$route.path.substr(1);

      // map不能跳出循环
      menus.map((item, index) => {
        if (!item.is_sub_menu) {
          if (item.path == currentPath) {
            this.menuPostion = index;
          }
        } else {
          item.sub_menus.map((sub_menu, sub_index) => {
            if (sub_menu.path == currentPath) {
              this.menuPostion = index + "-" + sub_index;
            }
          });
        }
      });
    },
    // 刷新页面
    refresh() {
      this.$router.go(0);
    },
    // 菜单点击事件
    handleOpen(index) {
      console.log(index);
    },
    // 退出登录
    logout() {
      request_logout()
        .then((res) => {
          const result = res.data;
          if (result.code == 200) {
            sessionStorage.removeItem("token");
            this.$router.push("/");
          }
        })
        .catch();
    },
  },
};
</script>

<style>
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 16px;
}
.el-submenu__title {
  font-size: 16px;
}
#main .el-menu-item.is-active,
#main .el-menu-item.active,
#main .el-menu-item:hover,
#main .el-submenu__title:hover {
  background-color: #409eff !important;
  color: #fff !important;
}
#main .el-menu-item.is-active i,
#main .el-menu-item.active i,
#main .el-menu-item:hover i,
#main .el-submenu__title:hover i,
#main .el-submenu__title:hover {
  color: #fff !important;
}
</style>